<!--编辑商品邮寄地址-->
<template>
    <div class="page_edditAddress pageNormalBackground">
        <headerT :title="addressId ? '编辑地址'   :  '新增地址'"/>
        <div class="everyBlockBgcolor edditAddressContent">
            <div class="itemAddress">
                <x-address title="所在地区" v-model="addressArea" :list="addressData" placeholder="请选择地址"
                           :show.sync="showAddress" @on-shadow-change="changeCity"></x-address>
            </div>
            <div class="itemAddress">
                <div class="label">详细地址</div>
                <div class="inputBlock">
                    <input type="text" v-model="addressDetail.address" placeholder="请输入所在街道，门牌号等"/>
                </div>
            </div>
            <div class="itemAddress">
                <div class="label">收货人</div>
                <div class="inputBlock">
                    <input type="text" v-model="addressDetail.username" placeholder="请输入收货人"/>
                </div>
            </div>
            <div class="itemAddress">
                <div class="label">手机号</div>
                <div class="inputBlock">
                    <input type="text" v-model="addressDetail.phone" placeholder="请输入手机号"/>
                </div>
            </div>
            <!--<div class="label">是否设置为默认地址</div>-->
            <group class="switch">
                <x-switch title="是否设置为默认地址" v-model="isDefaultAddress"></x-switch>
            </group>
        </div>
        <div class="btn btnSaveAddress" @click="saveInfo()">保存</div>
        <div v-if="addressId" class="btn btnSaveAddress btnDeleteAddress" @click="showDeleteDialog = true;">删除</div>
        <div v-transfer-dom>
            <confirm v-model="showDeleteDialog"
                     title="删除提示"
                     @on-cancel="showDeleteDialog = false"
                     @on-confirm="comfirmDeleteInfo">
                <p style="text-align:center;">是否确认删除该地址</p>
            </confirm>
        </div>
    </div>
</template>

<script>
    import {
        userDeliveryAddressList,
        userDeliveryAddressAdd,
        userDeliveryAddressEdit,
        userDeliveryAddressDel
    } from '../../services/personCenter'

    import {
        XAddress,
        ChinaAddressV4Data,
        Value2nameFilter as value2name,
        Group,
        XSwitch,
        Confirm,
        TransferDom
    } from 'vux'

    export default {
        name: "edditAddress",
        directives: {
            TransferDom
        },
        components: {
            XAddress,
            XSwitch,
            Group,
            Confirm
        },
        data() {
            return {
                addressArea: [],
                addressData: ChinaAddressV4Data,
                goods_id: this.$route.query.goods_id,
                number: this.$route.query.number,
                addressId: this.$route.query.addressId,
                isDefaultAddress: true,
                addressDetail: {
                    username: "",
                    phone: "",
                    province: "",
                    city: "",
                    district: "",
                    address: '',
                    city_num: '',
                    district_num: '',
                    country_num: '',
                    default: 2,
                },
                showAddress: false,
                showDeleteDialog: false,
                value: [],
            }
        },

        created() {
            if (this.addressId) {
                this.getUserDeliveryAddressList()
            }
        },

        methods: {
            // 获取用户收货地址
            getUserDeliveryAddressList() {
                // debugger
                let addressList = [];
                let param = {
                    default: 2,
                    type: 2,
                }
                let vm = this;
                this.$post(userDeliveryAddressList, param).then(res => {
                    addressList = res.data.data;
                    for (let i in addressList) {
                        let item = addressList[i];
                        if (String(item.id) === String(vm.addressId)) {
                            vm.addressDetail = item;
                            vm.addressArea = [item.province, item.city, item.district];
                            vm.isDefaultAddress = item.default === 1 ? true : false;
                            break;
                        }
                    }
                })
            },

            changeCity(ids, names) {
                if (ids.length) {
                    this.addressDetail.province = ids[0];
                    this.addressDetail.city = ids[1];
                    this.addressDetail.district = ids[2];
                }

                if (names.length) {
                    this.addressDetail.city_num = names[0];
                    this.addressDetail.district_num = names[1];
                    this.addressDetail.country_num = names[2];
                }

            },

            // 保存收货地址
            saveInfo() {
                this.addressDetail.default = this.isDefaultAddress ? 1 : 2;

                if (!this.addressId) {

                    this.$post(userDeliveryAddressAdd, this.addressDetail).then(res => {
                        if (res.code === 200) {
                            this.$tools.goPage_query('comfirmOrder', {
                                goods_id: this.goods_id,
                                number: this.number,
                                isOpenAddressDialog: '2',
                            })
                        }
                    })
                } else {
                    let param = {
                        id: this.addressDetail.id,
                        username: this.addressDetail.username,
                        phone: this.addressDetail.phone,
                        province: this.addressDetail.province,
                        city: this.addressDetail.city,
                        district: this.addressDetail.district,
                        address: this.addressDetail.address,
                        city_num: this.addressDetail.city_num,
                        district_num: this.addressDetail.district_num,
                        country_num: this.addressDetail.country_num,
                        default: this.addressDetail.default,
                    }
                    this.$post(userDeliveryAddressEdit, param).then(res => {
                        if (res.code === 200) {
                            this.$tools.goPage_query('comfirmOrder', {
                                goods_id: this.goods_id,
                                number: this.number,
                                isOpenAddressDialog: '2',
                            })
                        }
                    })
                }
            },

            // 删除收货地址
            comfirmDeleteInfo() {
                let param = {id: this.addressId};
                this.$post(userDeliveryAddressDel, param).then(res => {
                    if (res.code === 200) {
                        this.$tools.goPage_query('comfirmOrder', {
                            goods_id: this.goods_id,
                            number: this.number,
                            isOpenAddressDialog: '2',
                        })
                    }
                })
            },
        },
    };
</script>

<style lang="less" rel="stylesheet/less" type="text/less">
    .page_edditAddress {
        height: 100vh;
        font-size: .34rem;
        color: #4e4e4e;
        overflow-y: hidden;

        .itemAddress {
            line-height: 1.5rem;
            padding: 0 .42rem;


            .weui-cell__hd, .label {
                width: 2rem !important;
                display: inline-block !important;
            }

            .vux-popup-picker-select-box, .inputBlock, input {
                width: 7rem !important;
                display: inline-block !important;
                text-align: right;
                height: 1.5rem !important;
                border: none !important;
            }


        }


        .edditAddressContent {
            margin-top: 1.2rem;
            .weui-cell {
                line-height: 1.5rem !important;
                padding: 0 !important;
            }
        }

        .switch {
            position: relative;

            .weui-cell__bd, .weui-label {
                width: 7rem !important;
                display: inline-block !important;
                padding: 0 .2rem;
            }

            .weui-cell__ft {
                width: 5.5rem !important;
                height: 1.5rem !important;
                vertical-align: middle;
                display: inline-block !important;
                padding-right: .4rem;

                input {
                    vertical-align: middle;
                }
            }
        }

        .btnSaveAddress {
            width: 90%;
            margin: 1rem auto;
        }

        .btnDeleteAddress {
            background: transparent;
            color: #F6745A;
            box-shadow: none;
            border: 1px solid;
        }
    }
</style>
